<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
</head>
<body>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            width: 100%;
        }
        h3{
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
        }
        p{
            text-align: center;
            color: #666;
            padding: 10px 0;
        }

        .row {
            width: 400px;
            height: 50px;
            margin: 0 auto;

            display:flex;
            justify-content: center;
            align-items: center;
        }

        .row span{
            width: 100px;
            font-size: 20px;
        }
        .row input{
            width: 300px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            text-indent: 0.5em ;
            outline: none;

        }
        .row #submit{
            width: 300px;
            height: 40px;
            font-size: 20px;
            line-height: 40ox;
            margin: 0 auto;

            color: white;
            background-color: orange;

            border: none;
            border-radius: 10px;
        }
        .row #submit:active{
            background-color: grey;
        }
    </style>
    <h3>表白墙</h3>
    <p>输入后点击提交，信息会显示在表格中</p>
    <div class="container">
        <div class="row">
            <span>谁：</span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁：</span>
            <input type="text">
        </div>
        <div class="row">
            <span>说：</span>
            <input type="text">
        </div>
        <div class="row">
            <button id="submit">提交</button>
        </div>
    </div>

    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

    <script>
        //加入ajax的代码，此处要加入的逻辑有两个部分
        //点击提交按钮的时候，ajax要构造数据发送给服务器
        //页面加载时候，从服务器获取消息列表，显示在页面上
        function getMessages(){
            $.ajax({
                type:'get',
                url:'message',
                success:function(body){
                    //当前body已经是一个js对象数组了，ajax会根据相应的content type来进行自动解析
                    //如果服务器返回的content type已经是applocation/json了，ajax就会把body自动转成js的对象
                    //如果客服端没有自己转，也可以通过 json.parse()这个函数来手动转

                    //依次来取数组中的每个元素
                    let container=document.querySelector('.container');
                    for(let message of body){
                        let div=document.createElement('div');
                        div.innerHTML=message.from+'对'+message.to+'说'+message.message;
                        div.className='row';
                        container.appendChild(div);
                    }
                }
            });
        }

        //不要忘记函数调用！
        getMessages();

        //当用户点击submit，就会获取到input中的内容，从而把内存构造成一个div，插入到页面末尾
        let submitBtn=document.querySelector('#submit');
        submitBtn.onclick=function(){
            //1.获取到3个input里面的内容
            let inputs=document.querySelectorAll('input');
            let from=inputs[0].value;
            let to=inputs[1].value;
            let mesg=inputs[2].value;

            if(from==''||to==''||mesg==''){
                //用户还没填写完，暂时先不提交数据
                return;
            }
            //2.生成一个新的div，内容就是input里的内容，把这个新的div加到页面中
            let div=document.createElement('div');
            div.innerHTML=from+'对'+to+'说'+mesg;
            div.className='row';
            let container=document.querySelector('.container');
            container.appendChild(div);

            //3.提交后清空原有数据操作
        
            for(let i=0;i<inputs.length;i++){
                inputs[i].value='';
            }

            //4.把当前获取到的输入框内容，构造成一个post请求，通过ajax发送给服务器
            let body={
                from:from,
                to:to,
                message:mesg
            };

            $.ajax({
                type: "post",
                url: "message",
                contentType: "application/json;charset=utf8",
                // 把body转json格式的字符串
                data: JSON.stringify(body),
                success:function(body){
                    alert("消息提交成功!")
                },
                error:function(body){
                    alert("消息提交失败!")
                }
            });
        }
    </script>
</body>
</html>
